HTML - tags - picture tag

revision: January 28, 2025

Content

"picture" tag : specifies image resources

The <picture> tag gives web developers more flexibility in specifying image resources. The most common use of the <picture> element will be for art direction in responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport.

The <picture> element contains two tags: one or more <source> tags and one <img> tag.
The browser will look for the first "source" element where the media query matches the current viewport width, and then it will display the proper image (specified in the srcset attribute).
The "img" element is required as the last child of the <picture> element, as a fallback option, if none of the source tags matches.

The <picture> element works "similar" to <video> and <audio>. You set up different sources, and the first source that fits the preferences is the one being used.

Attributes: the <picture> element supports the global attributes and events attributes.

syntax

<picture> . . . </picture>

syntax

Codes:

                    <picture style="margin-left: 4vw;">
                        <source media="(min-width:650px)" srcset="../../pics/img_pink_flowers.jpg">
                        <source media="(min-width:465px)" srcset="../../pics/img_white_flower.jpg">
                        <img src="../../pics/img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
                    </picture>
                

Codes:

                    
                    <picture style="margin-left: 4vw;">
                        <source srcset="../../pics/1.jpg"  media="(min-width: 800px)" width="300" height="auto">
                        <img src="../../pics/car2.jpg" alt="" width="200" height="auto" />
                    </picture>